<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-05-05 22:02:56
 * @LastEditors: charles
 * @LastEditTime: 2021-07-14 15:18:36
-->
<template>
  <div ref="root" style="height: 95%"></div>
</template>

<script>
// 引入g2plot
// 对象的解构
import { Line } from "@antv/g2plot";
import { ref, onMounted } from "vue";
export default {
  setup() {
    // 获取到容器
    const root = ref(null);
    // 将实例化对象的函数封装起来
    let initChart = () => {
      // 声明数据
     const data = [
        {
          Date: "01",
          scales: 100,
        },
        {
          Date: "02",
          scales: 300,
        },
        {
          Date: "03",
          scales: 260,
        },
        {
          Date: "04",
          scales: 320,
        },
        {
          Date: "05",
          scales: 110,
        },
        {
          Date: "06",
          scales: 150,
        },
        {
          Date: "07",
          scales: 400,
        },
        {
          Date: "08",
          scales: 330,
        },
        {
          Date: "09",
          scales: 350,
        },
        {
          Date: "10",
          scales: 190,
        },
        {
          Date: "11",
          scales: 290,
        },
        {
          Date: "12",
          scales: 320,
        },

      ];
      // 实例化一个Colunm对象
      const line = new Line(root.value, {
        data,
        padding: "auto",
        xField: "Date",
        yField: "scales",
        xAxis: {
          tickCount: 5,
        },
        slider: {
          start: 0.1,
          end: 0.5,
        },
      });
      // 渲染
      line.render();
    };
    onMounted(initChart);
    return {
      root,
    };
  },
};
</script>